<template>
	<view>
		<!-- 所属标签 -->
		<view class="tag-list row" >
			<uni-tag  v-for="(item,index) in data.labelList"  :key="index"
			 :text="item.name" class="tag-view" type="primary" size="small"   :circle="true" :inverted="true"/>
		
		</view>
		
		<!-- 问题详情 -->
		<view class="content-main">
			<text class="title">{{data.title}}</text>
			<view class="info">
				<view class="author center">
					<image :src=" data.userImage ||'/static/images/banner1.jpg'" mode=""></image>
					<text>{{data.nickName}}</text>
				</view>
				<text> · {{$util.dateFormat(data.updateDate)}}</text>
			</view>
			
			<!-- 文章内容   -->
			<!-- 渲染数据中的标签内容 nodes的html代码字符串 -->
			<!-- #ifdef MP -->
			<!-- <rich-text selectable="true" nodes="<h2 style='color:red'>文章内容</h2>"></rich-text> -->
			<rich-text class="markdown-body content"  selectable="true" :nodes="data.htmlContent"></rich-text>
			<!-- #endif -->
			
			<!-- #ifndef MP -->
			<!-- selectable  长按复制内容 -->
			<!-- <text selectable="true" v-html="`<h2 style='color:red'>文章内容</h2>`"></text> -->
			<text class="markdown-body content" selectable="true" v-html="data.htmlContent"></text>
			<!-- #endif -->
		</view>
		
		<!-- 回答 -->
		<view class="footer">
			<view class="comment">
				<view class="footer-header">{{data.title}}个回答</view>
				<view class="comment-item  row" 
				v-for="(item,index) in replyList" :key="index"
				>
					<image :src="  item.userImage ||'../../static/images/banner1.jpg'" ></image>
					<view class="comment-right">
						<view class="info space-between center">
							<text>{{item.nickName}}</text>
							<text>· {{$util.dateFormat(item.createDate)}}</text>
						</view>
						<!-- 渲染数据中的标签内容 nodes的html代码字符串 -->
						<!-- #ifdef MP -->
						<!-- <rich-text selectable="true" nodes="<h2 style='color:red'>文章内容</h2>"></rich-text> -->
						<rich-text class="markdown-body content"  selectable="true" :nodes="item.htmlContent"></rich-text>
						<!-- #endif -->
						
						<!-- #ifndef MP -->
						<!-- selectable  长按复制内容 -->
						<!-- <text selectable="true" v-html="`<h2 style='color:red'>文章内容</h2>`"></text> -->
						<text class="markdown-body content" selectable="true" v-html="item.htmlContent"></text>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮  ： 关注和评论按钮 -->
		<view class="question-option row ">
			<!-- 0 未关注   1 已关注 -->
			<text  v-if="data.star"  @click="starQuestionHandler"  class="one grey">已关注问题</text>
			<text  v-else @click="starQuestionHandler"   class="one iconfont icon-jiaguanzhu">关注问题</text>	
			<text @click="showAnswerHandler" class="one iconfont icon-edit">回答问题</text>
		</view>
		
		<!-- 回答问题输入框 -->
		<view v-if="showAnswer" class="answer-box" @touchmove.stop.prevent="()=>{}">
			<view class="title center" @touchend.prevent="()=>{}">
					<!--注意“  触摸后阻止事件 修饰符  touchend.prevent  ”-->
				<view class="one">
					<text  @touchend.prevent="showAnswerHandler"  class="iconfont icon-close"></text>
				</view>
				<text class="one">回答问题</text>
				<button :disabled="!content"  @touchend.prevent="addReply" class="btn" type="primary" size="mini">提交</button>
			</view>
			
			<!-- maxlength最多输入两百个字  	focus 自动聚焦 -->
			<textarea v-model="content"  :focus="focus" maxlength="200"   class="textarea" value="" placeholder="展开说说....." />
		</view>
		
		<!-- 分享 -->
		<mxg-share ref="share"  :shareData="{title:data.title}"></mxg-share>
		
	</view>
</template>

<script>
	import api from '@/api/question.js'
	export default {
		data() {
			return {
				id:null,
				data:{},//问题数据
				replyList:[], //回答列表
				showAnswer:false,  //显示框
				content:'', //回答内容
				focus:true, // textarea的自动获取焦点
			}
		},
		
		onLoad(option) {
				this.id = option.id
				// console.log(option.id)
				this.getQuestion()
				this.loadReplyList()
		},
		//监听按钮的事件钩子
		onNavigationBarButtonTap(e) {
			if(e.type === 'share'){
				this.$refs.share.showHandler()
			}
		},
		
		//微信小程序的分享组件钩子
		onShareAppMessage() {
			return{
				title:this.data.title,
				path:this.$util.routePath()
			}
		},
		methods: {
			// 关注问题
		async	starQuestionHandler(){
				uni.showLoading()
				const res = await api.starQuestion(this.id)
				uni.hideLoading()
				if(res.code === 20000) {
					this.data.star = !this.data.star
				}else{
					this.$util.msg('关注失败')
				}
			},
			// 点击回答问题按钮触发
			showAnswerHandler(){
				console.log('？？？？？')
				//判断是否登录 未登录进入登录页
				const isLogin = this.$util.isLogin()
				if(isLogin) this.showAnswer  = !this.showAnswer
			},
			
			//新增回答信息
		async	addReply(){
				const  content  = this.content.trim()
				if(!content) retrun 
				this.focus  = false  
				uni.showLoading({
					title:'提交中',
					mask:true  
				})
				const data = { 
					questionId:this.id,
					mdContent:content,
					htmlContent:content
				}
				const  res  = await api.addReply(data)
				uni.hideLoading()
				if(res.code === 20000){
						this.showAnswer = false  //隐藏弹窗
						//重新查询问答列表 
						this.loadReplyList()
						this.$util.msg('回答成功', {icon:'success'})
						this.content = ''
				}else{this.$util.msg('回答失败，请重试')}
			},
			
			// 问题详情
		async	getQuestion(){
				const   {data}  =  await  api.getQuestionById(this.id)
				//处理图片  在H5的小程序太大了  replace(1、/\<img/gi 正则表达, 2、替换标签)
				data.htmlContent =	data.htmlContent.replace(/\<img/gi,'<img style="width:100%;height:auto;"')
				this.data = data
			},
			
			// 回答列表
		async	loadReplyList(){
			const { data } =  await	api.getReplyById(this.id)
			this.replyList = data
			
			}
			
		}
	}
</script>

<style lang="scss">
	@import url('@/common/css/github-markdown.css');
	@import url('@/common/css/github-min.css');
	
	image{
		width: 80rpx;
		height: 80rpx;
	}
	
	/* 底部 */
		.answer-box {
			z-index: 100;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 0 5px $xg-text-color-grey;
			.title {
				font-size: 35rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}
			.iconfont {
				 padding: 20rpx;
				color: $xg-color-primary;
			}
			.btn {
				padding: 0 20rpx;
				margin-left: 15rpx;
			}
			.textarea {
				height: 350rpx;
				font-size: 30rpx;
				padding: 15rpx 20rpx;
				width: 100%;
				background-color: #F8F9FB;
			}
		}
	
	
	.question-option{
		position:fixed ;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		border-top: .5px solid #EFEFF4;  //下划线 
		background-color: $xg-color-grey;
		text{
			color: $xg-text-color-blue;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 90rpx;
			&:first-child{
				border-right:.05px solid #EFEFF4 ;
			}
		}
		.grey{
			color:$xg-text-color-grey;
		}
	}
	
	
	.tag-list {
		// 一行排列不下，换行
		flex-wrap: wrap;
		padding: 10rpx 25rpx;
		font-size: 14px;
		background-color: #ffffff;
		.tag-view {
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
    
	.content-main {
		padding: 25rpx;
		.title {
			font-size: 45rpx;
			line-height: 55rpx;
			font-weight: bold;
		}
		.info {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			.author {
				font-size: 30rpx;
				color: #303133;
				image {
					width: 45rpx;
					height: 45rpx;
					border-radius: 100%;
					margin-right: 10rpx;
				}
			}
			&>text {
				margin-left: 10rpx;
				font-size: 25rpx;
				color: #999;
			}
		}
	}

	.footer {
		background-color: #F1F1F1;
		padding-top: 10rpx;
		/* 标题 */
		.footer-header{
			font-size: 30rpx;
			color: #303133;
			font-weight: bold;
			padding: 25rpx;
			&:before{
				content: '';
				width: 0;
				height: 40rpx;
				margin-right: 25rpx;
				border-left: 6rpx solid $xg-color-primary;
			}
		}
	}
	
	/* 评论 */
	.comment {
		background-color: #FFFFFF;
		margin-top: 10rpx;
		// 最下方有评论按钮,
		padding-bottom: 120rpx;
		.comment-item {
			padding: 20rpx 25rpx;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				margin-right: 20rpx;
			}
			
			.comment-right{
				width: calc(100% - 80rpx);
				font-size: 25rpx;
				color: $xg-text-color-grey;
				.content{
					font-size: 30rpx;
					color: $xg-text-color-black;
					margin: 10rpx 0;
				}
			}
		}
	}
	
	/* 底部 */
	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		white-space: nowrap;// 不换行
		padding: 20rpx;
		background-color: #FFFFFF;
		border-top: $xg-underline;
		.textarea {
			font-size: 30rpx;
			padding: 15rpx 20rpx;
			width: 100%;
			height: 70rpx;
			background-color: #F8F9FB;
			border-radius: 30rpx;
		}
		.btn {
			padding: 0 20rpx;
			margin-left: 15rpx;
		}
	}
</style>

